<template>
  <div class="Transfer">
    <header class="h-s">
    <span><router-link to="/"><i></i>首页</router-link></span>
    <span>转账</span>
    <span><i></i></span>
  </header>
    <div class="h-input">
      <span class="h-span"></span>
      <img src="../../static/img/转账-搜索.png" alt="" class="h-img" />
      <input type="text" name="color"  placeholder="搜索">
    </div>
    <section class="m-s">
      <ul>
        <li v-for="item in items">
          <p class="art_list_left">
            <img v-bind:src="item.url"><span>{{item.text}}</span>
          </p>
        </li>
      </ul>
    </section>
    <p class="t-p">最近</p>
    <section class="m-s">
      <ul>
        <li v-for="item in ites">
          <div class="art_list">
            <img v-bind:src="item.src">
            <div class="l-text">
              <p>{{item.text}}</p>
              <p>{{item.tex}}</p></div>

          </div>
        </li>
      </ul>
    </section>
  </div>

</template>

<script>
    export default {
        name: "Transfer",
      data () {
        return {
          items: [
            {
              url: "../../static/img/transfer/transfer_01.jpg",
              text: "转给我的朋友"
            }, {
              url: "../../static/img/transfer/transfer_02.jpg",
              text: "转给支付宝账户"
            }, {
              url: "../../static/img/transfer/transfer_03.jpg",
              text: "转到银行卡"
            }
          ],
          ites:[
            {
              src: "../../static/img/transfer/transfer_04.jpg",
              text: "快乐的哒",
              tex:"102***@qq.com"
            }
          ]
        }
      }
    }
</script>

<style scoped>
  body,div,article,header,.Transfer{
    background: white;
  }
  .h-s{
    padding: .8rem .6rem;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 1rem;
  }
  .h-s span i{
    display: inline-block;
    width: 1rem;
    height: 2rem;
    vertical-align: middle;
  }
  .h-s span:nth-child(1) a{
    color: #108ee9;
  }
  .h-s span:nth-child(1) i{
    background: url(../../static/img/transfer/contact_06.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    margin-right: .3rem;
    width: .8rem;
    height: 1.2rem;
  }
  .h-s span:nth-child(2){
    color: black;
    font-size: 1.1rem;
    font-weight: bolder;
    margin-right: .6rem;
  }
  .h-s span:nth-child(3) i{
    width: 1.5rem;
    height: .6rem;
    background: url(../../static/img/转账-省略.png) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    margin-left: .6rem;
  }
  .h-input{
    margin: .5rem 0;
    width: 100%;
    display: flex;
    border-radius: 0.2rem;
    background:#F2F2F2;
    padding: 0.2rem 0;
  }
  .h-input input{
    width: 86%;
    background:#F2F2F2;
    border: none;
    outline: none;
    font-size: 0.8rem;
    text-indent: 0.5rem;
  }
  ::-webkit-input-placeholder{
    color: #999;
    opacity: 0.6;
  }
  .h-img{
    height: 1.3rem;
  }
  .h-span{
    width: 5%;
  }
  .h-span-2{
    width: 3%;
  }
  .m-s ul{
    width: 100%;
  }
  .m-s ul li{
    font-size: 1rem;
    width: 94%;
    padding: 0.5rem 3%;
    margin: 0 auto;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
  }
  .art_list_left img{
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
  }
  .art_list_left span{
    font-size: .9rem;
  }
  .t-p{
    width: 100%;
    font-size: .7rem;
    color: #999;
    padding: .9rem 0;
    text-indent: .8rem;
    background: #f2f2f2;
    border-bottom: 1px solid #ddd;
  }
  .art_list{
    display: flex;
  }
  .art_list img{
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
  }
  .l-text{
    line-height: 1rem;
  }
  .l-text p:first-child{
    font-size: .9rem;
    color: black;
  }
  .l-text p:last-child{
    font-size: .7rem;
    color: #999;
  }
</style>
